<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ShopType } from '@/types/pages/home'

const props = defineProps({
    data: {
        type: Array as any,
        default: () => []
    }
})

const emits = defineEmits(['click', 'enshrine'])
const enshrine = (val: ShopType) => {
    emits('enshrine', val)
}
const itemFn = (val: ShopType) => {
    uni.navigateTo({
        url: '/views/subViews/findProduct/productDetail/index?id=' + val.id
    })
    emits('click', val)
}
const WaterfallRef = ref<any>(null)
const resetLoadmore = () => {
    WaterfallRef.value.resetLoadmore()
}
defineExpose({
    resetLoadmore
})
</script>

<template>
    <fui-waterfall
        ref="WaterfallRef"
        leftGap="20"
        rightGap="20"
        columnGap="20"
        topGap="20"
        :draggable="false"
    >
        <fui-waterfall-item
            v-for="(item, index) in data"
            :key="index"
            :src="item.pic"
            @click="itemFn(item)"
        >
            <view class="cont">
                <!-- <view class="glad" @click.stop="enshrine(item)">
          <image
            style="width: 18px"
            mode="widthFix"
            v-if="item.collectFlag"
            src="@/static/image/glad.png"
          ></image>
          <image style="width: 18px" mode="widthFix" v-else src="@/static/image/nglad.png"></image>
        </view> -->
                <view class="title">
                    {{ item.name }}
                </view>
                <view class="price">
                    {{ $amountFormat(item.amount) }}
                </view>
            </view>
        </fui-waterfall-item>
    </fui-waterfall>
</template>

<style lang="scss" scoped>
// :deep(.fui-waterfall__item-wrap) {
//   box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
// }
.fui-waterfall__wrap {
    .fui-waterfall__item-wrap {
        ::v-deep .fui-waterfall__img {
            border-radius: 6px !important;
        }
    }
}

.cont {
    position: relative;
    margin: 6px 0 0;

    .glad {
        position: absolute;
        top: -50px;
        right: 10px;
        background: rgba(96, 96, 96, 0.4);
        border-radius: 6px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .title {
        /* 商品标题 */

        font-size: 14px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0px;
        height: 36px;
        /* 外部/black 3 */
        color: #606060;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .price {
        margin-top: 3px;

        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: 0px;

        /* 外部/Black font */
        color: #303030;
    }
}
</style>
